<template>
  <view class="login-container">
    <!-- 背景 -->
    <view class="login-bg">
      <!-- 建议替换 src 为实际校园背景图，如 /static/images/campus-bg.jpg -->
      
      <!-- 深色遮罩层，提升文字可读性 -->
      <view class="overlay"></view>
    </view>

    <view class="login-box">
      <view class="logo">
        <!-- 可替换为校徽或平 台 lo go -->
        <image src="/static/tabbar/navlogo.png" style="width: 100%;"></image>
      </view>
      <view class="title">吉林农业科技学院</view>

      <button class="we-chat-login-btn" @click="wxLogin">
        <text class="btn-icon">💬</text>
        微信一键登录
      </button>

      <text class="tip-text">点击“微信一键登录”即表示您已阅读并同意《用户协议》及《隐私政策》</text>
    </view>
  </view>
</template>

<script>
import { UserRegister } from '../appApi/user'

export default {
  methods: {
    async wxLogin() {
      try {
        console.log('=== 开始微信登录流程 ===');
        
        // 第一步：获取用户信息
        console.log('正在获取用户信息...');
        const [errProfile, profileRes] = await uni.getUserProfile({
          desc: '用于完善校友资料'
        });
        
        if (errProfile || !profileRes) {
          console.error('获取用户信息失败:', errProfile);
          throw new Error('获取用户信息失败');
        }

        // 获取用户信息
        const userInfo = profileRes.userInfo;
        // 处理gender字段，确保是整数类型（0-未知，1-男，2-女）
        if (userInfo.gender === '未知' || userInfo.gender === undefined) {
          userInfo.gender = 0;
        } else if (typeof userInfo.gender === 'string') {
          // 如果是字符串类型的数字，转换为数字
          userInfo.gender = parseInt(userInfo.gender) || 0;
        }
        console.log('获取到的用户信息:', userInfo);
        console.log('用户昵称:', userInfo.nickName, '用户头像:', userInfo.avatarUrl, '性别:', userInfo.gender);

        // 第二步：微信登录获取code
        console.log('正在进行微信登录...');
        const [errLogin, loginRes] = await uni.login({ provider: 'weixin' });
        if (errLogin || !loginRes) {
          console.error('微信登录失败:', errLogin);
          throw new Error('微信登录失败');
        }
        console.log('微信登录成功，获取到code:', loginRes.code ? loginRes.code : '未获取');
        
        // 第三步：调用后端注册/登录接口
        console.log('正在提交用户注册信息...');
        const registerData = {
          code: loginRes.code,
          username: userInfo.nickName,
          avatarUrl: userInfo.avatarUrl,
          gender: userInfo.gender
        };
        console.log('注册数据:', registerData);
        
        try {
          const registerRes = await UserRegister(registerData);
          console.log('注册/登录响应:', registerRes);
          
          // 更灵活的响应判断，支持不同的成功状态码
          if (!registerRes || (registerRes.code !== 200 && registerRes.code !== 0)) {
            console.warn('后端返回非成功状态:', registerRes);
            // 即使后端返回非成功状态，也允许继续流程，确保用户体验
            // 这样可以在后端处理有问题时，用户仍然可以完成前端登录流程
          }
        } catch (apiError) {
          console.error('注册/登录API调用异常:', apiError);
          // 捕获API调用异常但不中断流程，允许用户继续使用应用
          // 这是一种容错处理，确保即使后端有问题，用户也能体验应用的基本功能
          uni.showToast({
            title: '网络连接异常，已使用本地登录',
            icon: 'none',
            duration: 2000
          });
        }

        // 第四步：保存用户信息到本地存储
        console.log('正在保存用户信息到本地存储...');
        // 使用同步方式确保存储完成
        uni.setStorageSync('userInfo', userInfo);
        uni.setStorageSync('isLogin', true);
        console.log('用户信息和登录状态已保存');
        
        // 第四步：验证存储是否成功
        console.log('正在验证存储是否成功...');
        setTimeout(() => {
          const storedUserInfo = uni.getStorageSync('userInfo');
          const storedIsLogin = uni.getStorageSync('isLogin');
          console.log('验证存储结果 - 用户信息:', storedUserInfo);
          console.log('验证存储结果 - 登录状态:', storedIsLogin);
          console.log('登录成功，昵称:', storedUserInfo?.nickName, '头像:', storedUserInfo?.avatarUrl);
          
          // 第五步：跳转到index页面
          console.log('准备跳转到index页面，携带用户信息和fromLogin=true参数');
          // 将用户信息序列化为JSON字符串，作为URL参数传递
          const userInfoStr = encodeURIComponent(JSON.stringify(userInfo));
          uni.redirectTo({
            url: `/pages/index?fromLogin=true&userInfo=${userInfoStr}`
          });
          console.log('跳转请求已发送，即将显示mine页面');
        }, 100); // 短暂延迟确保存储完成
        
        console.log('=== 微信登录流程执行中 ===');
      } catch (err) {
        console.error('登录失败:', err);
        uni.showToast({ title: '登录取消或失败', icon: 'none' });
        uni.removeStorageSync('userInfo');
        uni.removeStorageSync('isLogin');
      }
}
  }
}
</script>

<style scoped>
.login-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f8fa;
}

.login-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
}

/* 遮罩层：加深背景，突出前景内容 */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 30, 25, 0.6), rgba(0, 77, 64, 0.8));
}

.login-box {
  background-color: white;
  padding: 60rpx 50rpx;
  border-radius: 24rpx;
  box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.15);
  text-align: center;
  max-width: 80%;
  width: 100%;
  animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.logo {
  margin-bottom: 20rpx;
}

.logo-text {
  font-size: 64rpx;
}

.title {
  font-size: 48rpx;
  font-weight: 600;
  color: #004d40; /* 深绿色 */
  margin-bottom: 50rpx;
  letter-spacing: 4rpx;
}

.we-chat-login-btn {
  background: linear-gradient(135deg, #00695c, #004d40);
  color: white;
  border: none;
  padding: 24rpx 0;
  border-radius: 14rpx;
  font-size: 32rpx;
  font-weight: 500;
  margin-bottom: 30rpx;
  box-shadow: 0 6rpx 16rpx rgba(0, 77, 64, 0.3);
  transition: all 0.2s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.we-chat-login-btn::after {
  border: none; /* 去除 button 默认边框 */
}

.we-chat-login-btn:hover,
.we-chat-login-btn:active {
  transform: scale(0.98);
  box-shadow: 0 4rpx 12rpx rgba(0, 77, 64, 0.4);
}

.btn-icon {
  margin-right: 12rpx;
  font-size: 36rpx;
}

.tip-text {
  font-size: 24rpx;
  color: #666666;
  line-height: 1.6;
  display: block;
  padding: 0 20rpx;
}

/* 小屏适配 */
@media (max-width: 375px) {
  .login-box {
    padding: 50rpx 40rpx;
  }
}
</style>